import { h, Component } from 'preact';
import s from './style';
import classNames from 'classnames';
import InvitedRecord from './InvitedRecord';
import InvitedRank from './InvitedRank';
import WinRecord from './WinRecord';
export default class TabContainer extends Component {
	constructor() {
		super();
		this.state = {
			lastactive : 0,
			active : 0,
			index: 0
		};
	}
	onActive = (newActive) => () => {
		this.setState({
			active: newActive
		});
	}
	onActiveClass = (index) => {
		const { active } = this.state;
		return classNames({
			[s.active]: index === active
		});
	}
	onActiveContentElement = (index) => {
		if (index === 0){
			return (<InvitedRecord />);
		}
		if (index === 2){
			return (<WinRecord />);
		}
		return (<InvitedRank />);
	}
	render() {
		const { active } = this.state;
		const animationClass = s[`animation${active}`];
		return (

			<div className={s.container}>
				<div className={s.tab}>
					<div className={s.tabheader}>
						<div className={this.onActiveClass(0)} onClick={this.onActive(0)}>最近邀请好友</div>
						<div className={this.onActiveClass(1)} onClick={this.onActive(1)}>邀请排行榜</div>
						<div className={this.onActiveClass(2)} onClick={this.onActive(2)}>中奖记录</div>
					</div>
					<div className={s.activebar}>
						<div className={animationClass}></div>
					</div>
					{this.onActiveContentElement(active)}
				</div>

			</div>
		);
	}
}
